/**
 * @typedef {Object} TextShapeStyle
 * @property {string?} color
 * @property {number?} fontSzie
 *
 * @typedef {ShapeOptions&{
 * text:string;
 * style?:TextShapeStyle
 * }} TextShapeOptions
 */

class TextShape extends Shape {
  /**
   * @description 内容
   * @type {string}
   */
  text;

  /**
   * @description 样式
   * @type {TextShapeStyle}
   */
  style = {
    color: "#000",
    fontSzie: 16,
  };

  /**
   * @description 构造函数
   * @param {TextShapeOptions} options
   */
  constructor(options) {
    super(options);
    this.text = options.text;
    if (options.style) {
      this.style = {
        ...this.style,
        ...options.style,
      };
    }
    this.width = options.width ?? this.style.fontSzie * this.text.length;
    this.height = options.height ?? this.style.fontSzie;
  }

  draw() {
    this.ctx.fillStyle = this.style.color;
    this.ctx.font = `${this.style.fontSzie}px caption`;
    this.ctx.fillText(this.text, this.x, this.y, this.width);
  }

  /**
   * @description 某个点是否在图形之内
   * @param {number} x
   * @param {number} y
   * @returns {boolean}
   */
  contains(x, y) {
    return (
      x >= this.x &&
      x <= this.x + this.width &&
      y <= this.y &&
      y >= this.y - this.height
    );
  }
}
